/*
  CustomScrollView

  可以将多种滑动控件组合在一
  比如第一行是普通文字,第二行是图片,第三到五行是列表,第六行多列的列表等等

  使用Sliver来自定义滚动模型（效果）的组件
  它可以包含多种滚动模型

  CustomScrollView的子组件必须都是Sliver

  Sliver就是使用对象池管理创建的滑动列表，以达到节约内存的作用
 */

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      // home: HomePage(),
      home: MoreScrollItem(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // title: Text('CustomScrollViewDemo'),
      ),
      // 将Sliver组件拼接成一个可滑动控件
      body: CustomScrollView(
        slivers: [
          // 普通按钮转化为Sliver组件
          SliverToBoxAdapter(
            child: FlutterLogo(
              size: 50,
            ),
          ),
          // 同理
          SliverToBoxAdapter(
            child: Text('我是第二行'),
          ),
          // List列表,如果只包含SliverList,效果和ListView相同
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext ctx, int index) {
                return Container(
                  height: 100,
                  color: Colors.primaries[index % 5],
                );
              },
              childCount: 10,
            ),
          ),
          // grid列表,如果只包含SliverGrid,效果和GridView相同
          SliverGrid.count(
            crossAxisCount: 6,
            childAspectRatio: 1,
            children: List.generate(18, (index) {
              return Container(
                color: Colors.primaries[index % 18],
              );
            }),
          )
        ],
      ),
    );
  }
}

class MoreScrollItem extends StatelessWidget {
  const MoreScrollItem({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('更多Sliver列表'),
      ),
      body: Container(
        height: 600,
        color: Colors.black12,
        child: CustomScrollView(
          slivers: [
            // 可滑动的AppBar
            // 上滑隐藏,下滑拉伸
            SliverAppBar(
              title: Text('SliverAppBar'),
              // 固定住,上滑不会消失
              pinned: true, 
              // 悬浮的,和 pinned 相对, 只要滑动就消失或者出现
              floating: true, 
              // 貌似有
              // snap: true,
              expandedHeight: 200,
              // 是否拉伸
              stretch: true,
              flexibleSpace: FlexibleSpaceBar(
                background: FlutterLogo(),
                title: Text('flexTitle'),
                // 背景控件的消失方式,都差太不多
                // collapseMode: CollapseMode.pin,
                stretchModes: [
                  StretchMode.blurBackground,
                  StretchMode.fadeTitle,
                ],
              ),
            ),
            // 固定高度的列表
            SliverFixedExtentList(
              // 设置高度
              itemExtent: 100,
              delegate: SliverChildListDelegate([
                // 每个Logo都是100
                FlutterLogo(size: 500),
                FlutterLogo(size: 200),
                FlutterLogo(size: 300),
              ]),
            ),
            // 根据模板控件的高度
            SliverPrototypeExtentList(
              delegate: SliverChildListDelegate([
                Icon(Icons.ac_unit),
                Icon(Icons.ac_unit),
                Icon(Icons.ac_unit),
              ]),
              // 根据TextButton的高度设置子控件的高度
              prototypeItem: TextButton(
                child: Text('hello'),
                onPressed: () {},
              ),
            ),
            // 占满视窗的剩余位置,效果和ViewPage类似
            SliverFillViewport(delegate: SliverChildListDelegate([
              Text('占满整个视窗'),
              Text('占满整个视窗'),
              Text('占满整个视窗'),
            ]))
          ],
        ),
      ),
    );
  }
}
